<!DOCTYPE html>
<html>
<head>
	<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<title>相见倒计时</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<script type="text/javascript" src="./jquery.cookie.min.js"></script>
	<style type="text/css">
	 	*{
	 		padding: 0;margin: 0;
	 	}
	 	html,body{
	 		width: 100%;
	 		height: 100%;
	 		padding: 0;
	 		margin: 0;
	 	}
	 	body{
	 		background-image: url(./miss.jpg);
	 		background-size: cover;
	 		background-repeat: no-repeat;
	 		-webkit-user-select: none;
	 		-moz-user-select: none;
	 		-ms-user-select: none;
	 		user-select: none;
	 	}
	 	.dear{
	 		position: relative;
	 		width: 100%;
	 		height: 100%;
	 	}
	 	.time .times{
	 		color: red;
	 		font-weight: bold;
	 		font-size: 50px;
	 	}
	 	.app{
	 		width: 300px;
	 		overflow-y: auto;
	 		margin: auto;
	 		position: relative;
	 		top: 20%;
	 	}
	 	p{
	 		text-align: center;
	 		color: #fff;
	 		font-size: 20px;
	 		margin-bottom: 10px;
	 		position: relative;
	 	}
	 	.time span{
	 		font-size: 12px;
	 	}
	 	h2{
	 		color: #fff;
	 		text-align: center;
	 		font-size: 35px;
	 		padding-top: 20px;
	 		box-sizing: border-box;
	 	}
	 	.footer{
	 		position: absolute;
	 		text-align: center;
	 		bottom: 0;
	 		width: 100%;
	 		padding: 20px;
	 		box-sizing: border-box;
	 		z-index: 9999;
	 	}
	 	.dear img{
	 		display: none;
	 	}


	 	@media screen and (max-width:600px){
	 		body{
	 			/*background-image: url(./miss_wap1.jpg);*/
	 			background-image: none;
	 			background-size: 100%;
	 			color: #fff;
	 			background-color: #fcc;
	 		}
	 		h2{
	 			padding-top: 1rem;
	 			padding-bottom: 1rem;
	 			color: #fff;
	 			/*display: none;*/
	 		}
	 		p{
	 			color: #fff;
	 		}
	 		.footer{
	 			position: relative;
	 			text-align: left;
	 			font-size: 18px;
	 			padding: 0 40px;
	 			color: #fff;
	 			text-align: center;
	 		}
	 		.dear img{
	 			display: block;
	 			width: 80%;
	 			position: relative;
	 			left: 50%;
	 			margin-left: -40%;
	 			border-radius: 10px;
	 			margin-bottom: 5px;
	 		}
	 		.app{
	 			top: 0;
	 		}
	 	}
	</style>
</head>
<body>
<div class="dear">
	<h2>好想你啊</h2>
	<img src="./1.png">
	<div class="app">
		<p class="time">
			<span>还剩下</span>
			<span class="times"></span>
			<span>秒</span>
		</p>
		<p>我们就能见面了</p>
	</div>
	<img src="./3.png">
	
	
	<p class="footer">
		离开你这么多天，发现没有你的日子是怎么样都高兴不起来的,好想好想你，真想我们可以快一点见面<br /><span style="color: red;font-size: 26px;">我爱你</span>
	</p>
	<img src="./2.png">
</div>
<script>
	$(function(){
		if($.cookie('miss') == null){
			window.location.href = './index.html'
		}
	 	var fun = () =>{
	 		let startTime = new Date(); // 开始时间
	        let endTime = new Date('2021-02-20'); // 结束时间
	        // console.log(endTime - startTime); // 毫秒数
	        // console.log(Math.floor((endTime - startTime) / 1000) - 3600); // 秒数
	        // console.log(Math.floor((endTime - startTime) / 1000 / 60)); // 分钟
	        // console.log(Math.floor((endTime - startTime) / 1000 / 60 / 60)); // 小时
	        // console.log(Math.floor((endTime - startTime) / 1000 / 60 / 60 / 24)); 
	        var time = Math.floor((endTime - startTime) / 1000) - 3600;
	        $('.times').html(time);
	 	}
	 	fun()
	 	setInterval(function(){
	 		fun()
	 	},1000)
	})
</script>
</body>
</html>